<template>
  <div class="key_contain">
    <div class="searchWrap">
      <div class="title" v-if="title">
        <span>{{ title }}</span>
        <van-icon name="clear" class="icon" @click="clear" v-if="clearable" />
      </div>
      <div class="key">
        <div
          class="key-item"
          v-for="(item, index) in keyList"
          :key="index"
          @click="searchByKey(item.keyword)"
        >
          {{ item.keyword }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Key",
  // props: ["keyList", "title", "clearable"],
  props: {
    keyList: {
      type: Array,
      default: [],
    },
    title: {
      type: String,
      default: "",
    },
    clearable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    //向上传递关键字
    searchByKey(kw) {
      this.$emit("searchByKey", kw);
    },
    //向上传递删除历史记录
    clear() {
      this.$emit("clear");
    },
  },
};
</script>

<style lang="less" scoped>
.searchWrap {
  padding: 19px 12px 0;
  .title {
    font-size: 14px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    .icon {
      font-size: 20px;
    }
  }
  .key {
    display: flex;
    flex-wrap: wrap;
    .key-item {
      height: 30px;
      line-height: 30px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 12px;
      background-color: #f3f4f9;
      border-radius: 15px;
      padding: 0 10px;
      margin: 12px 12px 0 0;
    }
  }
}
</style>